<template>
  <div>
    <!-- 简介 -->
    <div class="synopsis">
      <div class="title">
        <i
          class="iconfont icon-xiangzuo"
          @click="$router.push('/index'), change()"
        ></i>
        <div class="story">
          <p v-show="title">{{ syContent.title }}</p>
        </div>
        <div class="icon">
          <i class="iconfont icon-star" v-show="!star" @click="praise"></i>
          <i
            class="iconfont icon-star-full"
            v-show="star"
            @click="rePraise"
          ></i>
          <i class="iconfont icon-fenxiang" @click="showShare = true"></i>
        </div>
      </div>

      <div class="books" @scroll="onScrolled">
        <div class="head">
          <div class="img">
            <img :src="syContent.img" />
          </div>

          <div class="headCon">
            <h1>{{ syContent.title }}</h1>
            <div class="writer">{{ syContent.writer }}</div>
            <p>
              <span>{{ syContent.type }}</span> |
              <span>{{ syContent.end }}</span>
            </p>

            <div class="vip">
              <i class="icon iconfont icon-viphuiyuan"></i>
              开通会员可，可免费阅读本书
              <i class="icon2 iconfont icon-gengduo"></i>
            </div>
          </div>
        </div>

        <div :class="['synoCon', { con: flag }]" @click="control(flag)">
          <p>{{ syContent.synopsis }}</p>

          <div class="icon" v-show="!flag">
            <i class="iconfont icon-xiala"></i>
          </div>
        </div>

        <div class="catalogue" @click="$router.push('/catalogue')">
          <h1>目录</h1>
          <p>查看目录</p>
          <i class="iconfont icon-gengduo"></i>
        </div>

        <div class="comment">
          <div class="comHead">
            <h1>书籍评论</h1>
            <div class="write">
              <i class="iconfont icon-xiepinglun"></i>
              <p>写评论</p>
            </div>
          </div>
          <div class="comContent">
            <div class="img">
              <img :src="comment.img" />
            </div>
            <div class="comtext">
              <div class="comTextHead">
                <h1>{{ comment.name }}</h1>
              </div>
              <div class="cont">
                {{ comment.talk }}
              </div>
              <div class="comTextBtm">
                <div class="date">{{ comment.date }}</div>

                <div class="conIcon">
                  <div class="left">
                    <i class="iconfont icon-pinglun"></i>
                    <span>{{ comment.num }}</span>
                  </div>

                  <div class="right">
                    <i class="iconfont icon-dianzan"></i>
                    <span>{{ comment.goods }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="comBottom"
            @click="$router.push({ name: 'comment', query: { id: comId } })"
          >
            查看全部评论
          </div>
        </div>

        <div class="fans" @click="$router.push('/fans')">
          <div class="fansLeft">粉丝榜</div>
          <div class="fansRight">
            <div class="moreImg">
              <div
                v-for="(item, index) in fens"
                :key="index"
                :class="{ img: index == 0, img2: index == 1, img3: index == 2 }"
              >
                <img :src="item.img" />
              </div>
              <!-- <div class="img2">
                <img :src="fens[1].img" />
              </div>
              <div class="img3">
                <img :src="fens[2].img" />
              </div> -->
              <i class="iconfont icon-huangguan"></i>
            </div>
            <i class="iconfont icon-gengduo"></i>
          </div>
        </div>

        <div class="order">
          <h1>作者其他作品</h1>
          <div
            class="orderBooks"
            v-for="(item, index) in order"
            :key="item.id"
            v-show="true == index < 3"
          >
            <div class="img">
              <img :src="item.img" />
            </div>

            <div class="orderCon">
              <h1>{{ item.title }}</h1>
              <span>{{ item.writer }}</span>
              <span>{{ item.synopsis }}</span>
            </div>

            <div
              class="look"
              @click="
                $router.push({ name: 'synopsis', query: { id: item.id } })
              "
            >
              查看
            </div>
          </div>
        </div>

        <div class="moreInfo">
          <h1>图书更多信息</h1>
          <p>橙子小说</p>
          <span
            >本书数字版由HENCY读者提供，授权本软件使用，制作，发行，若包含不良信息，请及时告知客服</span
          >
        </div>
      </div>

      <div class="navBtm">
        <ul>
          <li @click="addShelf">加入书架</li>
          <li
            @click="$router.push({ name: 'content', query: { id: id } }), read()"
          >
            开始阅读
          </li>
          <li @click="showPopup">全文购买</li>
        </ul>
      </div>
    </div>

    <!-- 分享 -->
    <van-share-sheet v-model="showShare" :options="options" />
    <!-- 会员免费 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <div class="buy">
        <div class="buytitle">
          <p @click="close">关闭</p>
          <h1>购买</h1>
          <p>帮助</p>
        </div>
        <div class="buyCon">
          <div class="buyItem">
            <h1>全书价格</h1>
            <p>99.9书豆</p>
          </div>

          <div class="buyItem">
            <h1>账户余额</h1>
            <div class="bDou">
              <p>0书豆</p>
              <i class="iconfont icon-shuaxin"></i>
            </div>
          </div>
        </div>
        <div class="buyBtn">
          <div class="pay">
            <p>实付: <span>99.9书豆</span></p>
          </div>

          <div class="bus" @click="$router.push('/bookBean')">充值并购买</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  getSynopsis,
  getContent,
  getFens,
  getFensRank,
} from "../../api/content";
import { Toast } from "vant";
export default {
  data() {
    return {
      storyShow: false,
      star: false,
      show: false,
      flag: false,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      title: false,
      scrolled: false,
      syContent: [],
      id: null,
      comId: null, // 评论
      comment: [], // 评论
      fens: [], // 粉丝
      order: [],
      // shelfData: [],
    };
  },
  created() {
    this.$emit("getnavs-btn", false);
    let queryId = this.$route.query.id;
    let qid = queryId;
    this.comId = queryId;
    localStorage.setItem("qid", qid);

    getSynopsis().then((data) => {
      let index = data.synopsis.findIndex((item) => item.id == queryId);

      this.syContent = data.synopsis[index];
      console.log("获取数据", this.syContent);
      this.order = data.synopsis;
    });
    getContent().then((data) => {
      let index = data.data.findIndex((item) => item.id == queryId);
      let list = data.data[index];
      this.id = list.content[0].id;
    });
    getFens().then((data) => {
      this.comment = data.fens.hot[0];
    });
    getFensRank().then((data) => {
      // console.log(data);
      for (let i = 0; i < 3; i++) {
        this.fens.push(data.fens[i]);
      }
      // console.log(this.fens);
    });
    let lightStar = JSON.parse(localStorage.getItem("starColl"));
    // console.log(lightStar);
    let index = lightStar.findIndex((item) => item.id == queryId);
    this.star = lightStar[index].star || false;
  },
  methods: {
    control(obj) {
      this.flag = !obj;
    },
    change() {
      this.$emit("getnavs-btn", true);
    },
    showPopup() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    praise() {
      Toast("收藏成功");
      let newColl = JSON.parse(localStorage.getItem("collection"));
      let starC = JSON.parse(localStorage.getItem("starColl"));
      if (newColl) {
        let index = newColl.findIndex((item) => item.id == this.syContent.id);
        if (index == -1) {
          newColl.push(this.syContent);
          starC.push({ id: this.syContent.id, star: true });
          localStorage.setItem("collection", JSON.stringify(newColl));
          localStorage.setItem("starColl", JSON.stringify(starC));
          this.star = true;
        }
      } else {
        localStorage.setItem("collection", JSON.stringify([this.syContent]));
        localStorage.setItem(
          "starColl",
          JSON.stringify([{ id: this.syContent.id, star: true }])
        );
        this.star = true;
      }
    },
    rePraise() {
      Toast("取消收藏成功");
      let delColl = JSON.parse(localStorage.getItem("collection"));
      let delStar = JSON.parse(localStorage.getItem("starColl"));

      let index = delColl.findIndex((item) => item.id == this.syContent.id);
      delColl.splice(index, 1);
      delStar.splice(index, 1);

      localStorage.setItem("collection", JSON.stringify(delColl));
      localStorage.setItem("starColl", JSON.stringify(delStar));
      this.star = false;
    },
    onScrolled() {
      this.scrolled = window.scrollY > 25;
      if (this.scrolled) {
        this.title = true;
      } else {
        this.title = false;
      }
    },
    addShelf() {
      let newShelf = JSON.parse(localStorage.getItem("shelf"));

      console.log("存放localStorage", this.syContent);
      if (newShelf) {
        let index = newShelf.findIndex((item) => item.id == this.syContent.id);
        if (index == -1) {
          newShelf.push(this.syContent);
          localStorage.setItem("shelf", JSON.stringify(newShelf));
        }
      } else {
        localStorage.setItem("shelf", JSON.stringify([this.syContent]));
      }
      // if (newShelf) {
      //   let index = newShelf.findIndex((item) => item.id == this.comId);
      //   if (index == -1) {
      //     this.shelfData.push(this.syContent);
      //     localStorage.setItem("shelf", JSON.stringify(this.shelfData));
      //   }
      // } else {
      //   this.shelfData.push(this.syContent);
      //   localStorage.setItem("shelf", JSON.stringify(this.shelfData));
      // }
    },
    read() {
      let his = JSON.parse(localStorage.getItem("history"));

      if (his) {
        let index = his.findIndex((item) => item.id == this.syContent.id);
        if (index == -1) {
          his.push(this.syContent);
          localStorage.setItem("history", JSON.stringify(his));
        }
      } else {
        localStorage.setItem("history", JSON.stringify([this.syContent]));
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.onScrolled);
  },
  watch: {
    "$route.query"() {
      let queryId = this.$route.query.id;
      console.log(queryId);

      getSynopsis().then((data) => {
        let index = data.synopsis.findIndex((item) => item.id == queryId);
        this.$set(this, "syContent", data.synopsis[index]);
        this.$set(this, "order", data.synopsis);
      });
    },
  },
};
</script>

<style lang="less">
.synopsis {
  width: 100%;
  height: 100%;
  .title {
    position: fixed;
    width: 100%;
    min-height: 50px;
    display: flex;
    background-color: #fff;
    z-index: 1;
    i {
      flex: 0 0 40px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
    }
    .story {
      flex: 1;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      padding-left: 30px;
    }
    .icon {
      flex: 0 0 80px;
      .iconfont {
        margin-right: 20px;
      }
    }
  }
  .books {
    height: 100%;
    overflow-y: scroll;
    padding-top: 40px;
    padding-bottom: 50px;
    .head {
      padding: 15px;
      background-color: #fff;
      display: flex;
      .img {
        width: 100px;
        height: 130px;
        border-radius: 5px;
        padding-right: 14px;
        img {
          width: 100px;
          height: 130px;
          border-radius: 5px;
        }
      }
      .headCon {
        flex: 1;
        h1 {
          font-weight: 600;
          font-size: 18px;
        }
        .writer {
          font-size: 14px;
          color: #333;
          padding: 8px 0;
        }
        p {
          font-size: 12px;
          color: #969799;
          span {
            font-size: 12px;
          }
        }
        .vip {
          width: 200px;
          margin-top: 12px;
          font-size: 12px;
          color: #c79a6d;
          background-color: #f6f7f9;
          padding: 4px 6px;
          border-radius: 4px;
          .icon {
            color: #efb906;
          }
          .icon2 {
            color: #ddd;
          }
        }
      }
    }
    .synoCon {
      padding: 0 15px 10px 15px;
      background-color: #fff;
      line-height: 25px;
      height: 69px;
      font-size: 15px;
      overflow: hidden;
      position: relative;
      .icon {
        position: absolute;
        bottom: 6px;
        right: 14px;
        width: 40px;
        text-align: right;
        background-color: #fff;
        .iconfont {
          color: #969799;
          padding-right: 4px;
        }
      }
    }
    .con {
      height: auto;
    }
    .catalogue {
      display: flex;
      align-items: baseline;
      border-top: 2px solid #f6f7f9;
      padding: 15px;
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      h1 {
        flex: 0 0 40px;
        font-weight: 600;
      }
      p {
        flex: 1;
        font-size: 14px;
        color: #969799;
      }
      i {
        flex: 0 0 20px;
        text-align: center;
        color: #969799;
      }
    }
    .comment {
      width: 100%;
      margin-top: 4px;
      background-color: #fff;
      padding: 15px;
      box-sizing: border-box;
      .comHead {
        display: flex;
        align-items: baseline;
        padding-bottom: 15px;
        h1 {
          flex: 1;
          font-weight: 600;
        }
        .write {
          flex: 0 0 65px;
          display: flex;
          align-items: baseline;
          i {
            margin-right: 4px;
            color: #969799;
          }
          p {
            font-size: 14px;
            font-weight: 600;
          }
        }
      }
      .comContent {
        width: 100%;
        border-radius: 8px;
        background-color: #f6f7f9;
        display: flex;
        padding: 8px;
        box-sizing: border-box;
        .img {
          padding-right: 8px;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
        .comtext {
          .comTextHead {
            padding: 8px 0;
            h1 {
              font-size: 14px;
              color: #969799;
              width: 6em;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .cont {
            font-size: 14px;
            line-height: 20px;
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .comTextBtm {
            margin-top: 8px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            color: #969799;
            .date {
              font-size: 12px;
            }
            .conIcon {
              display: flex;
              .left {
                margin-right: 10px;
              }
              span {
                font-size: 12px;
              }
            }
          }
        }
      }
      .comBottom {
        width: 100%;
        padding-top: 15px;
        text-align: center;
        font-size: 15px;
      }
    }

    .fans {
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
      background-color: #fff;
      margin: 4px 0;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      .fansLeft {
        font-weight: 600;
        padding-right: 8px;
      }
      .fansRight {
        .moreImg {
          width: 70px;
          display: flex;
          position: relative;
          .img,
          .img2,
          .img3 {
            position: absolute;
            top: -5px;
            width: 23px;
            height: 23px;
            border: 2px solid #fff;
            border-radius: 50%;
            img {
              width: 23px;
              height: 23px;
              border-radius: 50%;
            }
          }
          .img2 {
            left: 22px;
          }
          .img3 {
            left: 44px;
          }
          i {
            position: absolute;
            top: -17px;
            left: 7px;
            font-size: 12px;
            color: gold;
          }
        }
        i {
          font-size: 14px;
          color: #969799;
          line-height: 18px;
        }
        display: flex;
      }
    }
    .order {
      padding: 15px;
      background-color: #fff;
      h1 {
        font-weight: 600;
      }
      .orderBooks {
        padding-top: 15px;
        display: flex;
        .img {
          width: 50px;
          height: 70px;
          border-radius: 4px;
          margin-right: 10px;
          img {
            width: 50px;
            height: 70px;
            border-radius: 4px;
          }
        }
        .orderCon {
          margin-right: 10px;
          flex: 1;
          h1 {
            padding-top: 6px;
            font-size: 15px;
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          span {
            padding-top: 6px;
            display: block;
            color: #969799;
            font-size: 12px;
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .look {
          background-color: #f6f7f9;
          border-radius: 20px;
          text-align: center;
          padding: 8px 10px;
          font-size: 12px;
          color: rgb(35, 179, 130);
          width: 50px;
          height: 15px;
          line-height: 15px;
          margin-top: 15px;
        }
      }
    }
    .moreInfo {
      padding: 15px;
      background-color: #fff;
      margin-top: 2px;
      h1 {
        font-weight: 600;
        margin-bottom: 10px;
      }
      p,
      span {
        color: #969799;
        font-size: 12px;
      }
    }
  }
  .navBtm {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    ul {
      display: flex;
      height: 40px;
      padding-top: 10px;
      padding-bottom: 4px;
      li {
        width: 33.33%;
        text-align: center;
        line-height: 40px;
      }
      :nth-child(2) {
        background-color: rgb(35, 179, 130);
        border-radius: 6px;
        color: #fff;
      }
      :nth-child(3)::after {
        content: "会员免费";
        display: block;
        width: 60px;
        height: 16px;
        line-height: 16px;
        position: absolute;
        top: 3px;
        right: 10px;
        font-size: 10px;
        background-color: #bd9574;
        background-image: linear-gradient(to right, #edd0ab, #bd9574);
        border-radius: 15px 15px 15px 0px;
        color: #fff;
      }
    }
  }
}
.buy {
  .buytitle {
    padding: 15px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: #333;
    p {
      font-size: 14px;
    }
  }
  .buyCon {
    .buyItem {
      color: #333;
      padding: 18px 16px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      border-bottom: 1px solid #f6f7f9;
      p {
        color: #969799;
      }
      .bDou {
        display: flex;
        align-items: baseline;
        i {
          padding-left: 8px;
          color: #969799;
        }
      }
    }
  }
  .buyBtn {
    width: 100%;
    display: flex;
    align-items: baseline;
    .pay {
      width: 55%;
      padding-left: 15px;
      box-sizing: border-box;
      font-size: 14px;
      span {
        color: rgb(35, 179, 130);
      }
    }
    .bus {
      width: 45%;
      text-align: center;
      color: #fff;
      background-color: rgb(35, 179, 130);
      position: relative;
      &::after {
        position: absolute;
        top: -8px;
        right: 0;
        content: "充值赠好礼";
        display: block;
        background-color: #e3a806;
        font-size: 12px;
        width: 70px;
        padding: 2px 3px;
        height: 16px;
        line-height: 16px;
        border-radius: 15px 15px 15px 0px;
        color: #fff;
      }
    }
    .pay,
    .bus {
      height: 50px;
      line-height: 50px;
    }
  }
}
</style>